<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>创建商品</title>
		<link rel="stylesheet" href="./static/css/semantic.min.css">
		<link rel="stylesheet" href="./static/css/manster.css">
	</head>
	
	<body>
		<br />
		<br />
		<br />
	<div class="m-container-small m-padded-tb-massive" style="max-width: 50em !important;">
	    <div class="ui container">
	        <div class="ui middle aligned center aligned grid">
	            <div class="column">
	                <h2 class="ui teal image header">
	                    <div class="content">
	                        商品新增
	                    </div>
	                </h2>
	                <div class="ui large form">
	                    <div class="ui  segment">
	                        <div class="field">
	                            <div class="ui left action input">
	                              <button class="ui teal button">
	                                商品名：
	                              </button>
	                              <input type="text" placeholder="商品名" name="title" id="title" />
	                            </div>
	                        </div>
	                        <div class="field">
	                            <div class="ui left action input">
	                              <button class="ui teal button">
	                                商品价格：
	                              </button>
	                              <input type="text" placeholder="商品价格" name="price" id="price" />
	                            </div>
	                        </div>
							<div class="field">
							    <div class="ui left action input">
							      <button class="ui teal button">
							        商品库存：
							      </button>
							      <input type="text" placeholder="商品库存" name="stock" id="stock" />
							    </div>
							</div>
							<div class="field">
							    <div class="ui left action input">
							      <button class="ui teal button">
							        商品描述：
							      </button>
							      <input type="text" placeholder="商品描述" name="description" id="description" />
							    </div>
							</div>
							<div class="field">
							    <div class="ui left action input">
							      <button class="ui teal button">
							        商品图片：
							      </button>
							      <input type="text" placeholder="商品图片" name="imgUrl" id="imgUrl" />
							    </div>
							</div>
	                        <button class="ui fluid large teal submit button" id="create" type="submit">新增商品</button>
	                    </div>
	
	                    <div class="ui error mini message"></div>
	
	                </div>
	
	            </div>
	        </div>
	    </div>
	</div>
	
	<script src="./static/js/jquery-3.3.1.js"></script>
	<script src="./static/js/semantic.min.js"></script>
	<script>
		jQuery(document).ready(function(){
			//绑定otp的click事件用于向后端获取验证码
			$("#create").on("click", function(){
				var title = $("#title").val();
				var price = $("#price").val();
				var stock = $("#stock").val();
				var description = $("#description").val();
				var imgUrl = $("#imgUrl").val();
				if(title == null || title == ""){
					alert("商品名不能为空");
					return false;
				}
				if(price == null || price == ""){
					alert("价格不能为空");
					return false;
				}
				if(stock == null || stock == ""){
					alert("库存不能为空");
					return false;
				}
				if(description == null || description == ""){
					alert("商品描述不能为空");
					return false;
				}
				if(imgUrl == null || imgUrl == ""){
					alert("商品图片不能为空");
					return false;
				}
				$.ajax({
					type:"POST",
					contentType:"application/x-www-form-urlencoded",
					url:"http://localhost:8888/item/create",
					data:{
						"title": title,
						"price": price,
						"stock": stock,
						"description": description,
						"imgUrl": imgUrl
					},
					xhrFields:{withCredentials:true},
					success:function(data){
						if("success" == data.status){
							alert("创建成功");
						}else{
							alert("创建失败，原因为"+data.data.errMsg);
						}
					},
					error:function(data){
						alert("创建失败，原因为"+data.responseText);
					}
					
				})
				return false;
			})
			
		});
	</script>
	
	</body>
</html>
